<template>
  <el-dialog :model-value="visible" title="邀请员工" width="20%" @close="cancel" append-to-body top="3vh">
    <div class="boardBox">
      <el-form  class="mt20" >
        <el-form-item>
          <div><img :src="img" alt=""></div>
        </el-form-item>
        <el-form-item >
           <!-- <div class="usrbj">扫码打开 </div> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">

        <el-button @click="cancel()">取消</el-button>
        <el-button color="#01509f" type="primary"  @click="copyText()">复制链接</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, onMounted } from "@/TUIKit/adapter-vue";
  import { createDepartment,getDepartmentedit } from "@/api/cf";
  import { ElMessage } from "element-plus";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
     info: {
      type: Object,
      default: {},
    },
  });


  const queryParams = ref({ parent_name: "", parent_id: "", name: "" , id: ""});
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "success", value: ""): void }>();

  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.info,
    newValue => {
      if (newValue) {
         url.value = newValue.url;
         img.value = newValue.qrcode;
      }
    }
  );


   function copyText() {
      //获取需要复制的文本内容。
      const text = url.value;
      // 创建一个临时的 textarea 元素。
      const el = document.createElement('textarea');
      // 将需要复制的文本内容赋值给 textarea 元素。
      el.value = text;
      //将 textarea 元素添加到页面中。
      document.body.appendChild(el);
      //选中 textarea 元素中的文本。
      el.select();
      // 执行复制命令，将选中的文本复制到剪贴板
      document.execCommand('copy');
      //从页面中移除 textarea 元素。
      document.body.removeChild(el);
      //弹出提示框，告知用户文本已复制成功。
      alert('文本已复制');
    }

  const url = ref('')
  const img = ref('')


  onMounted(() => {});

  function cancel() {
    emit("update:visible", false);
  }


</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #333;
    background-color: #f3f8fb;
    padding: 5px;
    border-radius: 6px;
  }

  .usrbj {
    font-size: 13px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
    text-align: center;
  }
}
</style>
